<script setup>
  import { onMounted, ref } from 'vue'
  import { http } from '@/utils/http.js'
  import { onLoad, onShow, onShareAppMessage } from '@dcloudio/uni-app'
  import { parseTime } from '@/utils/index.js'
  import { useUsercodeStore } from '@/store/usercode.js'

  const userCodeStore = useUsercodeStore()

  // 背包列表\
  const bagGoods = ref([])
  const mergeList = ref([])
  const currentPage = ref(1)
  async function getBagList() {
    const res = await http.request({
      url: '/api/bag/bagList',
      method: 'POST',
      data: {
        page: currentPage.value,
        limit: 20,
        compound: goodsCategary.value,
        type: saleCategary.value,
        launch: currentButton.value,
        status: statueCategory.value,
        is_bidding: 0,
        rule_id: 0,
      },
    })

    // 计算多少天过期
    res.data.forEach((item) => {
      const today = new Date()
      const passtime = new Date(parseTime(item.pass_time))
      const timeDifference = passtime - today
      item.pass_time = Math.floor(timeDifference / (1000 * 60 * 60 * 24))
      item.checked = false
    })
    bagGoods.value = [...bagGoods.value, ...res.data]
    if (currentPage.value == 1) {
      mergeList.value = res.compound_goods
    }

    console.log(res)
  }

  // // 去合成
  // function goMerge() {
  //   uni.navigateTo({
  //     url: '/mergePage/merge/index',
  //   })
  // }

  // // 去交易
  // function goDeal() {
  //   uni.navigateTo({
  //     url: '/transactionPage/transaction/index',
  //   })
  // }

  //折叠展开
  const currentButton = ref(1)
  const clickLimit = ref(true)
  function change(index) {
    if (clickLimit.value) {
      clickLimit.value = false
      allchecked.value = false
      currentButton.value = index
      currentPage.value = 1
      bagGoods.value = []
      getBagList()
      setTimeout(() => {
        clickLimit.value = true
      }, 1500)
    } else {
      uni.utils.toast('让手指放松下吧，请两秒后重试~')
    }
  }
  const carddetailRef = ref()
  const clickItem = ref()
  function closeDetail() {
    carddetailRef.value.close('center')
  }
  function itemClick(item, index) {
    if (currentButton.value == 2 && canChecked.value) {
      bagGoods.value[index].checked = !item.checked
      if (item.checked) {
        console.log('添加')
        deliveryList.value.push(item.goods_id)
      } else {
        deliveryList.value = deliveryList.value.filter(
          (e) => e !== item.goods_id
        )
      }
    } else {
      clickItem.value = item
      carddetailRef.value.open('center')
    }
  }
  //选择
  const deliveryList = ref([])
  const canChecked = ref(false)
  function canCheck() {
    canChecked.value = !canChecked.value
  }
  const allchecked = ref(false)
  function checkedAll() {
    if (!canChecked.value) {
      uni.showToast({
        icon: 'none',
        title: '请选点击选取',
      })
      return false
    }
    allchecked.value = !allchecked.value
    if (allchecked.value) {
      deliveryList.value = []
      bagGoods.value.forEach((item) => {
        item.checked = true
        deliveryList.value.push(item.goods_id)
      })
    } else {
      bagGoods.value.forEach((item) => {
        item.checked = false
      })
      deliveryList.value = []
    }
  }
  function checkboxChange(e) {
    console.log(e.detail.value)
    if (e.detail.value.length != bagGoods.value.length) {
      allchecked.value = false
    } else {
      allchecked.value = true
    }
    deliveryList.value = e.detail.value
  }

  function goOrder() {
    if (
      userCodeStore.usercode.token == '' ||
      userCodeStore.usercode.userId == ''
    ) {
      uni.utils.toast('为了让您有更好的体验，请先登录')
      setTimeout(() => {
        uni.navigateTo({
          url: `/pages/login/login`,
        })
      }, 2000)
      return
    }
    if (
      userCodeStore.usercode.isAddress == 0 &&
      userCodeStore.usercode.token != ''
    ) {
      uni.utils.toast('为了让您有更好的体验，请先完善物流信息')
      setTimeout(() => {
        uni.navigateTo({
          url: `/minePage/editaddress/index`,
        })
      }, 2000)
      return
    }
    if (deliveryList.value.length == 0) {
      uni.utils.toast('请选择奖品')
      return
    }
    // 创建一个对象，用于存储每个元素出现的次数
    const countMap = ref({})

    const arr = arrayToObject(deliveryList.value)

    const newarr = Object.entries(arr).map(([goods_id, num]) => ({
      goods_id,
      num,
    }))

    uni.navigateTo({
      url: `/mergePage/bagorder/index?info=${encodeURIComponent(
        JSON.stringify(newarr)
      )}`,
    })
  }
  function arrayToObject(arr) {
    return arr.reduce((acc, value) => {
      acc[value] = (acc[value] || 0) + 1
      return {
        ...acc,
      }
    }, {})
  }
  // 分类弹出
  // const categorypopup = ref()
  // function categoryPOP() {
  //   categorypopup.value.open('top')
  // }
  const saleCategary = ref('2')
  const goodsCategary = ref('0')
  const statueCategory = ref('1')
  function chooseSale(type) {
    saleCategary.value = type
    filter()
  }
  function chooseGoods(type) {
    goodsCategary.value = type
  }
  function chooseStatue(type) {
    statueCategory.value = type
  }
  // 重置筛选条件
  // function queryReset() {
  //   saleCategary.value = '2'
  //   goodsCategary.value = '0'
  // }
  // 筛选
  function filter() {
    currentPage.value = 1
    bagGoods.value = []
    getBagList()
    // categorypopup.value.close('top')
  }
  // 分类弹出
  const rulespopup = ref()
  function rulesPOP() {
    rulespopup.value.open('top')
  }

  function getMore() {
    allchecked.value = false
    ++currentPage.value
    getBagList()
  }
  function toshop() {
    uni.navigateTo({
      url: '/minePage/mybag/shop',
    })
  }

  onShareAppMessage(() => {
    return {
      title: '快来看看我的战利品',
      path: 'pages/bag/index',
    }
  })
  onShow(() => {
    // uni.hideTabBar()
    currentPage.value = 1
    goodsCategary.value = 0
    saleCategary.value = 2
    bagGoods.value = []
    allchecked.value = false
    currentButton.value = 1
    deliveryList.value = []
    getBagList()
  })
</script>

<template>
  <view class="bag-content">
    <view class="toshopPageBtn" @click="toshop"> 商家协商 </view>
    <view class="filter">
      <view class="box3">
        <view class="filter-left">
          <view
            class=""
            @click="chooseSale('0')"
            :class="{ actived: saleCategary == '0' }"
          >
            全部
          </view>
          <view
            @click="chooseSale('2')"
            :class="{ actived: saleCategary == '2' }"
          >
            现货
          </view>
          <view
            @click="chooseSale('1')"
            :class="{ actived: saleCategary == '1' }"
          >
            预售
          </view>
        </view>
        <view class="filter-right">
          <view
            :class="{
              bg: true,
              'active-view': currentButton == 2 ? true : false,
            }"
          >
            <!-- 'active-view': currentButton == 2 -->
          </view>
          <view
            :class="{ btn: true, btned: currentButton == 1 ? true : false }"
            @click="change(1)"
          >
            折叠
          </view>
          <view
            :class="{ btn: true, btned: currentButton == 2 ? true : false }"
            @click="change(2)"
          >
            展开
          </view>
        </view>
      </view>
    </view>

    <view class="goods">
      <view class="">
        <scroll-view
          :scroll-y="true"
          class="scroll-goods"
          @scrolltolower="getMore"
        >
          <view class="goods_box" style="">
            <view
              class="goods-item"
              v-for="(item, index) in bagGoods"
              :key="'baggoods' + index"
              @click="itemClick(item, index)"
            >
              <view class="goods-img">
                <image
                  v-if="item.rule_img"
                  :src="item.rule_img"
                  mode="heightFix"
                  style="position: absolute; top: 0; left: 0; height: 44rpx"
                ></image>
                <image
                  class=""
                  :class="{
                    itemImg: true,
                    'goods-itemed': item.checked ? true : false,
                  }"
                  :src="item.img"
                  mode=""
                ></image>
                <image
                  class="checkImg"
                  v-if="item.checked"
                  src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/bag/checked.png"
                  mode=""
                ></image>
                <image
                  style="
                    width: 40rpx;
                    height: 40rpx;
                    position: absolute;
                    left: 0;
                    top: 0;
                  "
                  src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/bag/shopIcon.png"
                  mode=""
                ></image>
                <view class="item_num" v-if="item.goods_num"
                  >{{ item.goods_num }}{{ item.true }}
                </view>
                <view class="presale" style="" v-if="item.goods_type == 1">
                  预售
                </view>
              </view>
            </view>
            <view
              class="goods-item"
              v-for="(item, index) in 12 - (bagGoods.length % 4)"
              :key="'baggoods' + index"
            >
            </view>
          </view>
        </scroll-view>
        <view class="bag-bottom" v-if="currentButton == 2">
          <view
            :class="{ 'all-select': true, 'all-selected': !allchecked }"
            @click="checkedAll"
            :checked="allchecked"
          >
            <image
              src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/bag/all-select.png"
            ></image>
          </view>
          <view
            :class="{ 'check-all': true, 'all-selected': !canChecked }"
            @click="canCheck"
          >
            <image
              src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/bag/check.png"
            ></image>
          </view>
          <view class="text-select">
            <text>已选:</text>
            <text style="color: #7948ea">{{ deliveryList.length }}</text>
          </view>
          <view class="shipment" @click="goOrder">
            <image
              src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/bag/shipment.png"
            ></image>
          </view>
        </view>
      </view>
    </view>

    <!-- 分类弹出层 -->
    <!--   <uni-popup ref="categorypopup" type="top">
      <view class="categorypopup">
        <view class="title"> 销售类型 </view>
        <view class="category" style="margin-bottom: 60rpx">
          <view
            @click="chooseSale('2')"
            :class="{ saleactive: saleCategary == '2' }"
            >现货</view
          >
          <view
            @click="chooseSale('1')"
            :class="{ saleactive: saleCategary == '1' }"
            >预售</view
          >
        </view>
        <view class="title"> 商品类型 </view>
        <view class="category" style="margin-bottom: 78rpx">
          <view
            @click="chooseGoods('0')"
            :class="{ saleactive: goodsCategary == '0' }"
            >全部</view
          >
          <view
            @click="chooseGoods('2')"
            :class="{ saleactive: goodsCategary == '2' }"
            >普通赏</view
          >
          <view
            @click="chooseGoods('1')"
            :class="{ saleactive: goodsCategary == '1' }"
            >特殊赏</view
          >
        </view>
        <view class="title"> 商品状态 </view>
        <view class="category" style="margin-bottom: 78rpx">
          <view
            @click="chooseStatue('1')"
            :class="{ saleactive: statueCategory == '1' }"
            >在库</view
          >
          <view
            @click="chooseStatue('3')"
            :class="{ saleactive: statueCategory == '3' }"
            >交易中</view
          >
        </view>
        <view class="category-button">
          <view class="reset" @click="queryReset"> 重置 </view>
          <view class="ask" @click="filter"> 确认 </view>
        </view>
      </view>
    </uni-popup> -->
    <!-- 说明弹出层 -->
    <uni-popup ref="carddetailRef" type="center">
      <view class="carddetail" v-if="clickItem">
        <image
          class="star"
          src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/bag/star.png"
          mode="widthFix"
        ></image>
        <image
          @click="closeDetail"
          class="detailClose"
          src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/bag/close.png"
          mode="widthFix"
        ></image>
        <view class="detail-title"> 详情 </view>
        <view class="detail-img">
          <image
            v-if="clickItem.rule_img"
            class="rule_img"
            :src="clickItem.rule_img"
            mode="heightFix"
          ></image>
          <image
            style="width: 100%"
            :src="clickItem.img"
            mode="widthFix"
          ></image>
        </view>
        <view class="carddetailInfo">
          <view class="top">
            {{ clickItem.goods_name }}
          </view>
          <view class="bottom">
            状态：{{ clickItem.goods_type == 1 ? '预售' : '现货' }}
          </view>
        </view>
      </view>
    </uni-popup>
    <!-- 说明弹出层 -->
    <uni-popup ref="rulespopup" type="bottom">
      <view class="rulespopup">
        <view class="rule-title"> 背包说明 </view>
        <view class="rule-content"> </view>
      </view>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
  .toshopPageBtn {
    width: 130rpx;
    height: 60rpx;
    text-align: center;
    line-height: 60rpx;
    color: #fff;
    font-size: 22rpx;
    background: rgba(149, 111, 237, 1);
    position: fixed;
    z-index: 2;
    bottom: 300rpx;
    right: 0rpx;
    border-top-left-radius: 26rpx;
    border-bottom-left-radius: 26rpx;
  }
  .carddetail {
    width: 538rpx;
    height: 800rpx;
    border: 4rpx solid #740b00;
    background: #fff;
    border-radius: 24rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    .detail-img {
      width: 366rpx;
      position: relative;
      .rule_img {
        height: 66rpx;
        position: absolute;
        top: 10rpx;
        left: 10rpx;
      }
    }
    .star {
      width: 80rpx;
      position: absolute;
      left: 6rpx;
      top: -56rpx;
    }
    .detailClose {
      width: 44rpx;
      position: absolute;
      right: 20rpx;
      top: -30rpx;
    }
    .detail-title {
      margin-top: 20rpx;
    }
    image {
      margin: 0 auto;
      margin-top: 20rpx;
    }
    .carddetailInfo {
      margin-top: 40rpx;
      width: 440rpx;
      height: 80rpx;
      border: 4rpx solid #740b00;
      border-radius: 8rpx;
      .top {
        width: 100%;
        height: 50rpx;
        text-align: center;
        line-height: 50rpx;
        color: #740b00;
        font-size: 26rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding: 0 10rpx;
        box-sizing: border-box;
      }
      .bottom {
        width: 100%;
        height: 30rpx;
        line-height: 30rpx;
        text-align: center;
        background: #b8a0e8;
        color: #ffffff;
        font-size: 18rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .all-selected {
    filter: grayscale(70%);
  }
  .bag-content {
    padding-top: 40rpx;
    box-sizing: border-box;
    color: #3d3d3d;
    font-weight: 500;
    background: #fff;
    height: 100vh;
    .merge {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 156rpx;
      padding: 0rpx 20rpx 0 20rpx;
      box-sizing: border-box;
      .merge-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title {
          font-size: 28rpx;
        }
        .go-merge {
          width: 178rpx;
          height: 48rpx;
          border-radius: 24rpx;
          background-color: #7863ff;
          font-size: 24rpx;
          text-align: center;
          line-height: 48rpx;
          color: #fff;
        }
      }
      .merge-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 18rpx;
        .content-item {
          width: 136rpx;
          height: 136rpx;
          border-radius: 10rpx;
          overflow: hidden;
        }
      }
    }
    .filter {
      display: flex;
      align-items: center;
      justify-content: space-between;

      padding: 0 20rpx;
      box-sizing: border-box;
      .box3 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        .filter-left {
          display: flex;
          align-items: center;
          justify-content: space-around;
          border-radius: 14rpx;
          width: 410rpx;
          height: 80rpx;
          background: linear-gradient(
            180deg,
            rgba(224, 209, 255, 1) 0%,
            rgba(217, 220, 255, 1) 100%
          );
          view {
            width: 100rpx;
            height: 50rpx;
            line-height: 50rpx;
            border-radius: 14rpx;
            background: rgba(255, 255, 255, 1);
            font-size: 24rpx;
            font-weight: 400;
            text-align: center;
            color: rgba(128, 128, 128, 1);
          }
          .actived {
            color: rgba(121, 72, 234, 1);
            font-weight: 500;
          }
        }
        .filter-right {
          display: flex;
          align-items: center;
          font-size: 26rpx;
          width: 154rpx;
          height: 54rpx;
          position: relative;
          border: 2rpx solid rgba(229, 229, 229, 1);
          border-radius: 20rpx;
          color: rgba(128, 128, 128, 1);
          .bg {
            width: 94rpx;
            height: 54rpx;
            position: absolute;
            top: 0;
            right: -8rpx;
            border-radius: 20rpx;
            background: linear-gradient(
              180deg,
              rgba(233, 222, 255, 1) 0%,
              rgba(217, 220, 255, 1) 100%
            );
          }
          .active-view {
            left: -8rpx !important;
          }
          .btn {
            width: 77rpx;
            height: 54rpx;
            border-radius: 20rpx;
            text-align: center;
            line-height: 54rpx;
            position: absolute;
            top: 0;
          }
          .btned {
            color: rgba(121, 72, 234, 1);
          }
          .btn:nth-child(1) {
            left: 0;
          }
          .btn:nth-child(2) {
            right: 0;
          }
        }
      }
    }
    .scroll-message {
      margin-top: 11rpx;
      background-color: #fbfaff;
      ::v-deep .uni-noticebar {
        height: 54rpx;
        // margin-top: 18rpx;

        .uni-noticebar__content-text {
          font-size: 20rpx;
        }
      }
    }
    .goods {
      margin-top: 60rpx;
      .scroll-goods {
        height: 70vh;
        .goods_box {
          // height: 72vh;
          display: flex;
          // align-items: center;
          flex-wrap: wrap;
          justify-content: space-around;
          padding: 0 20rpx;
          box-sizing: border-box;
        }
        .goods-itemed {
          filter: grayscale(60%);
        }
        .goods-item {
          display: flex;
          align-items: center;
          width: 128rpx;
          height: 188rpx;
          margin: 0 20rpx;
          // border-bottom: 1px solid #f5f5f5;
          box-sizing: border-box;
          margin-bottom: 20rpx;

          &:last-child {
            border: none;
          }
          .goods-img {
            position: relative;
            width: 128rpx;
            height: 180rpx;
            // height: 226rpx;
            border-radius: 8rpx;
            overflow: hidden;
            flex-shrink: 0;
            .checkImg {
              width: 76rpx;
              height: 76rpx;
              position: absolute;
              left: 50%;
              top: 50%;
              margin-left: -38rpx;
              margin-top: -38rpx;
            }
            .itemImg {
              width: 128rpx;
              height: 180rpx;
            }
            .item_num {
              width: 40rpx;
              height: 30rpx;
              line-height: 30rpx;
              text-align: center;
              position: absolute;
              bottom: 0;
              right: 0;
              z-index: 1;
              border-radius: 6rpx;
              background: #fff;
              border: 2rpx solid rgba(121, 72, 234, 1);
              font-size: 20rpx;
              color: rgba(121, 72, 234, 1);
            }
            .presale {
              position: absolute;
              bottom: 0;
              left: 0;
              z-index: 1;
              width: 66rpx;
              height: 32rpx;
              background-color: rgba(0, 0, 0, 0.5);
              border-radius: 0rpx 0rpx 8rpx 0rpx;
              font-size: 22rpx;
              color: #fff;
              line-height: 32rpx;
              text-align: center;
            }
          }
        }
      }
      .scroll-goods-deliver {
        height: 65vh;
        .scroll-goods-deliver-item {
          display: flex;
          align-items: center;
          // height: 228rpx;
          margin: 0 20rpx;
          padding-left: 22rpx;
          border-bottom: 1px solid #f5f5f5;
          box-sizing: border-box;
          margin-bottom: 30rpx;
          &:last-child {
            border: none;
          }
          ::v-deep uni-checkbox .uni-checkbox-input {
            border-radius: 50% !important;
          }
          ::v-deep checkbox .wx-checkbox-input {
            border-radius: 50% !important;
            color: #ffffff !important;
          }

          ::v-deep checkbox .wx-checkbox-input.wx-checkbox-input-checked {
            color: #fff;
            background: #7863ff;
          }

          ::v-deep .wx-checkbox-input.wx-checkbox-input-checked {
            border-color: #7863ff !important;
          }
        }
      }
    }
    .bottom-goto {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: fixed;
      bottom: 182rpx;
      left: 0;
      width: 100%;
      padding: 0 26rpx;
      height: 112rpx;
      box-sizing: border-box;

      ::v-deep uni-checkbox .uni-checkbox-input {
        border-radius: 50% !important;
      }
      ::v-deep checkbox .wx-checkbox-input {
        border-radius: 50% !important;
        color: #ffffff !important;
      }

      ::v-deep checkbox .wx-checkbox-input.wx-checkbox-input-checked {
        color: #fff;
        background: #7863ff;
      }

      ::v-deep .wx-checkbox-input.wx-checkbox-input-checked {
        border-color: #7863ff !important;
      }
      .check {
        font-size: 26rpx;
      }
      .check-right {
        display: flex;
        align-items: center;
        .total {
          margin-right: 44rpx;
          font-size: 26rpx;
        }
        .godeliver {
          height: 70rpx;
          width: 162rpx;
          border-radius: 35rpx;
          background-color: $all-color;
          text-align: center;
          line-height: 70rpx;
          font-size: 28rpx;
          color: #fff;
        }
      }
    }
    .bag-bottom {
      background-image: url(https://ojqn.wm2177.com/wechat_imgs/kapai-test/bag/bag-bottom.png);
      background-size: 100%;
      width: 100%;
      height: 218rpx;
      position: relative;
      .all-select {
        position: absolute;
        top: 92rpx;
        left: 40rpx;
        image {
          width: 140rpx;
          height: 72rpx;
        }
      }
      .check-all {
        position: absolute;
        top: 92rpx;
        left: 200rpx;
        image {
          width: 140rpx;
          height: 72rpx;
        }
      }
      .text-select {
        font-size: 24rpx;
        color: #000;
        position: absolute;
        top: 112rpx;
        right: 210rpx;
      }
      .shipment {
        position: absolute;
        top: 53rpx;
        right: 40rpx;
        image {
          width: 126rpx;
          height: 126rpx;
        }
      }
    }
    .categorypopup {
      height: 806rpx;
      padding: 24rpx;
      box-sizing: border-box;
      background-color: #fff;
      .title {
        margin-bottom: 28rpx;
        font-size: 32rpx;
        font-weight: 700;
      }
      .category {
        display: flex;
        align-items: center;
        view {
          width: 158rpx;
          height: 72rpx;
          margin-right: 24rpx;
          box-sizing: border-box;
          border: 2rpx solid #f4f4f4;
          color: #aaaaaa;
          font-size: 28rpx;
          text-align: center;
          line-height: 72rpx;
        }
        // .saleactive {
        //   color: $all-color;
        //   border-color: $all-color;
        // }
      }
      .category-button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        view {
          width: 328rpx;
          height: 102rpx;
          font-size: 32rpx;
          line-height: 102rpx;
          text-align: center;
        }
        .reset {
          background-color: #f5f6fa;
        }
        .ask {
          background-color: $all-color;
          color: #fff;
        }
      }
    }
    ::v-deep .uni-popup__wrapper-box {
      width: 100%;
      padding: 0;
      display: flex;
      justify-content: center;
    }
    .rulespopup {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 1150rpx;
      border-radius: 40rpx 40rpx 0 0;
      background: linear-gradient(
        162deg,
        #e9e6fb 3%,
        #e9e7fb 10%,
        #f9f9ee 67%,
        #ffffff 104%
      );
      .rule-title {
        width: 234rpx;
        margin: 36rpx 0 48rpx 0;
        box-sizing: border-box;
        background: url('https://ojqn.wm2177.com/wechat_imgs/wx/rule-title.png')
          no-repeat;
        background-size: 100%;
        background-position: 0 16rpx;
        font-size: 44rpx;
        font-weight: 700;
        text-align: center;
      }
      .rule-content {
        width: 708rpx;
        height: 982rpx;
        border-radius: 26rpx;
        background-color: #fff;
      }
    }
  }
</style>
